<template>
    <div>
        <Echart
            id="ClassifyAccess"
            :options="options"
            height="398px"
            width="100%"
        />
    </div>
</template>

<script>
import Echart from '@/echart/common/index.vue'
export default {
    components: {
        Echart
    },
    props: {
        cdata: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            options: {}
        }
    },
    watch: {
        cdata: {
            handler(newData) {
                this.options = {
                    title: {
                        left: 'center',
                        text: '分类访问量'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            // 坐标轴指示器，坐标轴触发有效
                            type: 'line' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        data: newData.lData,
                        y: 30
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: newData.xData
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    color: [
                        '#5885e8',
                        '#13cfd5',
                        '#00ce68',
                        '#ff9565',
                        '#20ff19'
                    ],
                    series: newData.sData
                }
            },
            immediate: true,
            deep: true
        }
    }
}
</script>
